<template>
    <div>
        <div>{{ $route.meta.title }}</div>
        <button @click="addobj">添加属性</button><br>
        <button @click="setobj">$set</button><br>
        <button @click="addarr">添加数组</button><br>
        <button @click="shanchuobj">删除属性</button><br>
        <button @click="delobj">$delete</button><br>
        <button @click="shanchuarr">删除数组</button><br>
        <div>{{ obj }}</div>
        <div>{{ arr }}</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            obj: {
                name: 'foo'
            },
            arr: [2,3,4,5]
        }
    },
    methods: {
        addobj() {
            this.obj.a = 1
            console.log(this.obj);
        },
        setobj() {
            this.$set(this.obj, 'b', 2)
            console.log(this.obj);
        },
        addarr() {
            this.arr.push(1)
            console.log(this.arr);
        },
        shanchuobj() {
            delete this.obj.a
            console.log(this.obj);
        },
        delobj() {
            this.$delete(this.obj, 'b')
            console.log(this.obj);
        },
        shanchuarr() {
            this.arr.splice(0, 1)
            console.log(this.arr);
        }
    }
}
</script>
<style></style>